
<!doctype html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!--这meta的作用就是删除默认的苹果工具栏和菜单栏-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--网站开启对web app程序的支持-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!--在web app应用下状态条（屏幕顶部条）的颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!--移动web页面是否自动探测电话号码-->
    <meta http-equiv="x-rim-auto-match" content="none">
    <!--移动端版本兼容 start -->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport" />
    <!--移动端版本兼容 end -->
    <title>支付宝扫码支付</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" th:href="@{/img/favicon.png}">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" th:href="@{/img/app-icon72x72@2x.png}" >

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="apple-touch-icon-precomposed" th:href="@{/img/app-icon72x72@2x.png}" >

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" th:content="@{/img/app-icon72x72@2x.png}" >
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet"  th:href="@{/css/amazeui.min.css}">
    <link rel="stylesheet"  th:href="@{/css/wx.css}">
    <meta name="__hash__" content="a7f55f8c2998c0e892ee07994c6c48a6_9564af55d8ce035f4603db35383c232e" /></head>
<script th:src="@{/js/qrcode.min.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<body>
<style>
    .qrcodeImg img{
        display: inline !important;
    }
</style>
<header class="alipay">
    <h1><a href="#" class="am-text-ir am-center">支付宝支付</a></h1>
</header>
<div class="am-g am-g-fixed am-margin-vertical wx-box">
    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center">
        <!--<div class="am-cf">
            <div class="am-center">因支付宝官方风控，若出现充值异常，请使用支付宝充值！！</div>
        </div>
        <hr>
        <div class="am-cf">
            <div class="am-center">请在订单提交后5分钟内完成支付！！</div>
        </div>
        <hr>-->
    </div>

    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center"><p class="am-text-xxxl" th:text="'￥' + ${channelOrder.amount}"></p></div>


    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center wx-code" id="img">
        <div  id="qrcode" class="qrcodeImg">

        </div>
        <img onclick="$('#use').hide()" id="use" th:src="@{/img/zf.png}"
             style="position: absolute;top: 50%;left: 50%;width:32px;height:32px;margin-left: -16px;margin-top: -16px">
    </div>

    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center">
        <img src="https://www.cs689.cn/Public/zfb/js/assets/img/alism.png" alt="请使用支付宝扫描
二维码以完成支付"><br>
        <div class="tps_btn" style="padding-top: 10px;">
            <!-- <a href="https://ds.alipay.com/?from=mobilecodec&scheme=alipays%3A%2F%2Fplatformapi%2Fstartapp%3FsaId%3D10000007%26clientVersion%3D3.7.0.0718%26qrcode%3Dhttps://ds.alipay.com/?from=mobilecodec&scheme=alipays%3A%2F%2Fplatformapi%2Fstartapp%3FsaId%3D10000007%26clientVersion%3D3.7.0.0718%26qrcode%3Dhttp%3A%2F%2Fwww.wmhl8.cn%2FPay_Jyzz_go2pay_id_20190421115827515556.html" target="_blank" style="color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block; width: 41%; border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">立即启动支付宝APP支付</a> -->
        </div>
        <div class="foot"> <p>手机用户可点击上面的启动支付宝按钮支付</p>
            <p>或保存二维码,选择“相册”扫码</p>
        </div>
    </div>
    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center">
        <hr>
        <div class="foot">
            <div class="am-text-center" th:text="'支付订单号：' + ${channelOrder.childOrderno}"></div>
        </div>
        <hr>
        <div class="foot">
            <div class="am-text-center" th:text="'订单时间：' +${#calendars.format(channelOrder.createTime,'yyyy-MM-dd HH:mm:ss')}"></div>
        </div>
        <hr>
        <div class="foot">
            <div class="am-text-center">请在订单提交后3分钟内完成支付</div>
        </div>
        <hr>
    </div>
</div>

<script th:inline="javascript">
    var qrcodeStr =  [[${qrcode}]];
    if(qrcodeStr == 'success'){
        $('#img').html('<div style="color: red;font-size: 25px;">订单已成功!</div>')
    }else if(qrcodeStr == 'error'){
        $('#img').html('<div style="color: red;font-size: 25px;">订单已经超时,请重新下单!</div>')
    }
</script>
</body>
</html>